import React, { Component } from 'react';
import menuList from '../../config/menuList'
import style from './index.module.less'
import { Menu } from 'antd';
import { MailOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;

class NavLeft extends Component {
    constructor() {
        super()
        this.state = {
        }
    }
    componentDidMount() {
        const menuNode = this.renderMenu(menuList)
        this.setState({
            menuNode
        })
    }
    renderMenu = (val) => {
        return val.map(item => {
            if (item.children) {
                return (
                    <SubMenu key={item.key} title={item.title}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return (
                <Menu.Item key={item.key}>{item.title}</Menu.Item>
            )
        })
    }
    render() {
        return (
            <>
                <div className={style.logoBox}>
                    <img src="/assets/logo-ant.svg" alt="" />
                    <h1>Imooc MS</h1>
                </div>
                <Menu mode="inline" theme='dark'>
                    {
                        this.state.menuNode
                    }
                </Menu>
            </>
        );
    }
}

export default NavLeft;
